<template>
  <div id="height-300">
    <transition name="custom-classes-transition" enter-active-class="animated bounceInLeft"
      leave-active-class="animated bounceOutLeft">
      <el-card class="box-card" :body-style="{ height: 'calc(100% - 56px)' }" :style="{
          marginRight: isBlock ? '0' : '-860px',
          width: '860px',
          height: '100%',
          overflow: 'hidden',
        }">
        <div v-show="left_status" @click="isBlock = isBlock ? false : true" style="
            position: absolute;
            top: 50%;
            left: -12px;
            width: 12px;
            height: 40px;
            background-color: #1e2c37;
            cursor: pointer;
            overflow: 'hidden'
          ">
          <i :class="left_status ? 'el-icon-caret-left' : 'el-icon-caret-right'"
            style="line-height: 40px; font-size: 8px; color: #fff"></i>
        </div>
        <div slot="header" class="clearfix" v-show="isBlock">
          <span>查询结果视图</span>
        </div>
        <div style="width: 100%; height: 570px; position: relative">
          <div class="attr_content">
            <leftTreeSider :attrlist="attrData" ref="leftAttr" :leftAttr_status="isAttr"></leftTreeSider>
          </div>
          
          <g6-model class="neo4jd3" ref="g6neo" @TouchWindow="TouchWindow" :paginations="paginations"></g6-model>
        </div>
      </el-card>
    </transition>
  </div>
</template>

<script>
  import G6Model from "../../../G6Common/G6Mini";
  import leftTreeSider from "../../../G6Common/leftTreeSider";
  export default {
    props: {
      left_status: {
        type: Boolean,
        default: false,
      },
      longData: {
        type: Array,
        default: [],
      },
    },
    watch: {
      left_status(newV) {
        if (newV) {
          this.isBlock = true;
          this.modelsData = this.longData;
          this.selModel(this.modelsData);
        } else {
          this.$refs["g6neo"].refresh();
        }
      },
    },
    components: {
      G6Model,
      leftTreeSider
    },
    data() {
      return {
        searchName: "",
        modelsLoading: false,
        modelsData: [], //树形数据
        isOnmove: false, //鼠标浮动到当前节点，显示出来
        searchNodes: [],
        isBlock: false, //用于折叠本体
        attrData: [], //属性表单
        isAttr: false,

        paginations: {},
      };
    },
    computed: {},
    mounted() {
      // this.searchModels();
    },
    methods: {
      /* 视图 start */
      //加载视图
      selModel(data) {
        setTimeout(() => {
          this.$refs["g6neo"].loadTreeSub(data);
        }, 100);
      },
      //收缩弹窗
      shrinkWindow() {
        this.isBlock = false;
      },
      //触发打开关闭属性表单
      TouchWindow(isShow, data) {
        // console.log(isShow, data);
        this.isAttr = isShow;
        if (isShow) {
          this.attrData = data.attrs;
        } else {
          this.attrData = [];
        }
      },
      /* 视图 end */
    },
  };
</script>

<style lang="less" scoped>
  #height-300 {
    position: absolute;
    top: 126px;
    right: -12px;
  }


  .el-card__body {
    padding-right: 0;
  }

  .text {
    font-size: 14px;
  }

  /* 搜索框样式 start */
  .searchInput {
    width: 100%;

    .searchInput_top {
      width: 100%;
      display: flex;
      align-items: center;
      flex-flow: row nowrap;
      padding: 1% 2%;
      justify-content: space-around;

      p {
        margin: 0;
        padding: 0;
      }

      .searchInput_btn {
        width: 30%;
        display: flex;
        align-items: center;
        flex-flow: row nowrap;
        justify-content: center;

        div {
          border: 1px solid #ccc;
          cursor: pointer;
          padding: 0 1px;
        }

        div:nth-of-type(1) {
          margin-right: 10%;
        }

        div:hover {
          background-color: #6495ed;
          color: #fff;
        }

        //如果是第一个 则前进为灰
        .searchInput_btn_none {
          border-block-color: #ccc;
          color: #ccc;
        }

        .searchInput_btn_none:hover {
          border-block-color: #ccc;
          color: #ccc;
          background-color: #fff;
          pointer-events: none;
          cursor: default;
        }
      }
    }
  }

  /* 搜索框样式 end */
  .box-card {
    width: 300px;
  }

  .manage-left-tree {
    width: 100%;
    height: calc(100% - 160px);
    overflow-y: auto;
    background-color: #fff;
    padding: 20px;
  }

  .attr_content{
    position: absolute;
    left: 0;
  }
  .neo4jd3 {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
</style>